<template>
  <div>
    <el-dialog
      :title="`${title}：${username} 分数操作`"
      v-model="state.isShow"
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
      align-center
      width="400px"
      @closed="closed"
    >
      <ul>
        <li class="flex items-center bg-[#e5f1f5] border rounded-[6px]">
          <div class="w-[100px] pl-2">分数操作</div>
          <div class="flex-1 w-0">
            <el-select class="w-full" v-model="form.action" placeholder="请选择分数操作">
              <el-option label="上分" :value="4"></el-option>
              <el-option label="下分" :value="6"></el-option>
            </el-select>
          </div>
        </li>
        <li class="flex items-center bg-[#e5f1f5] border rounded-[6px] mt-[10px]">
          <div class="w-[100px] pl-2">金额</div>
          <div class="flex-1 w-0">
            <el-input v-model="form.amount" type="number"></el-input>
          </div>
        </li>
      </ul>
      <template #footer>
        <el-button @click="closed">取 消</el-button>
        <el-button
          :disabled="state.updating"
          :loading="state.updating"
          type="primary"
          @click="confirm"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { message } from "@/utils/message";
import { debounce } from "lodash-es";
import { reqUpDownPoints } from "@/api/user";

const props = withDefaults(
  defineProps<{
    username?: string;
    uid?: number;
    type?: "user" | "robot";
  }>(),
  {
    username: "",
    uid: 0,
    type: "user"
  }
);
const emit = defineEmits(["update"]);

const title = computed(() => (props.type == "user" ? "用户" : "机器人"));
const state = reactive({
  isShow: false,
  updating: false
});
const form = reactive({
  action: 4,
  amount: <number | null>null
});
const closed = () => {
  form.action = 4;
  form.amount = null;
  state.isShow = false;
};
const open = () => {
  state.isShow = true;
};

const confirm = debounce(
  async () => {
    if (!props.uid) {
      message.warning("非法操作");
      return false;
    }
    if (!form.action) {
      message.warning("请选择分数操作");
      return false;
    }
    if (form.amount === 0) {
      message.warning("操作金额为0");
      return false;
    }
    if (!form.amount) {
      message.warning("请输入操作金额");
      return false;
    }
    state.updating = true;
    try {
      const res = await reqUpDownPoints({
        UserId: props.uid,
        Action: Number(form.action),
        Amount: Number(form.amount)
      });
      state.updating = false;
      emit("update");
      message.success((form.action == 4 ? "上分" : "下分") + res.message);
      setTimeout(() => {
        closed();
      }, 200);
    } catch (error) {
      state.updating = false;
      console.log(error);
    }
  },
  500,
  { leading: true, trailing: false }
);

defineExpose({
  open
});
</script>
<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding: 20px;
}
</style>
